<template>
  <div class="All">
    <div class="header">
      <img style="position: relative;width:150px;height:80px" :src="imgPath1" alt="">
      <span class="header_content">填写订单</span>
    </div>
    <div class="main">
         <el-alert style="margin-top:10px" title="温馨提示：本平台的销售商不会以任何理由，要求您点击任何网址链接进行退款或者支付操作" type="info" show-icon> </el-alert>
         <p class="consignee">收货人信息</p>
         <div style="width:1200px;float:left;z-index:10;" >
         <div class="consignee_address" v-for="item in myAddress" ref="dom1" :key="item.id" @mouseover="showIt(item.id)" @mouseout="hideIt(item.id)" @click="changeBorder(item.id)">
           <p class="consignee_address_information">
             <span class="consignee_address_name">{{item.name}}</span>
             <span class="consignee_address_name" style="margin-left:70px">{{item.tel}}</span>
           </p>
           <p class="consignee_address_details">
             <span class="consignee_address_name">{{item.address}}</span>
           </p>
           
           <p style="margin-top:20px;margin-left:20px;height:20px;width:100px;display:none" ref="dom">
             <span class="consignee_address_name">编辑</span>
           </p>
           <p style="margin-left:160px;margin-top:-7px;position: absolute;top:220px;height:20px;width:100px;display:none" ref="dom2">
             <svg t="1602572692638" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2379" width="16" height="16"><path d="M512 0C312.32 0 153.6 158.72 153.6 358.4 153.6 624.64 512 1024 512 1024s358.4-399.36 358.4-665.6C870.4 158.72 711.68 0 512 0z m0 486.4c-71.68 0-128-56.32-128-128s56.32-128 128-128 128 56.32 128 128-56.32 128-128 128z" p-id="2380"></path></svg><span class="consignee_address_name">默认地址</span></i>
           </p>
         </div>
          </div>
              <!-- <p style="margin-top:20px"><button style="width:100px;height:20px" @click="selectCity">新增收货地址+</button></p> -->
               <div style="position:relative;top:25px;float:left"  @click="bindOk"><b-button style="" v-b-modal.modal-center @click="selectCity" style="width:100px;height:20px">新增收货地址+</b-button>
                  <b-modal id="modal-center" centered title="添加收货地址">
                    <p class="my-4">
                      <span style="margin-right:20px">收货人</span><el-input style="width:240px;height:30px"
                          placeholder="请输入姓名"
                          v-model="inputName"
                          clearable>
                        </el-input>
                    </p>
                    <p  >
                      <span style="margin-right:7px">联系电话</span><el-input style="width:240px;height:30px"
                          placeholder="请输入联系电话"
                          v-model="inputTel"
                          clearable>
                        </el-input>
                    </p>
                    <p style="position: relative;">
                         <span style="margin-right:6px">选择地区</span><el-cascader
                            size="large" style="width:240px"
                            :options="options"
                            v-model="selectedOptions"
                            @change="handleChange">
                          </el-cascader>
                    </p>
                       <p>
                      <span style="margin-right:7px">详细地址</span><el-input style="width:240px;height:30px"
                          placeholder="请输入详细的地址"
                          v-model="inputPlace"
                          clearable>
                        </el-input>
                    </p>
                  </b-modal>
               </div> 
              <!-- <p style="margin-top:20px"><el-button type="text" @click="open1" style="width:100px;height:20px">新增收货地址</el-button></p> -->
         <div class="deliver_goods" style="float:left">
           <p class="consignee">送货清单</p>
           <div class="deliver_goods_address">
             <div class="deliver_goods_address_left">
               <p style="margin-top:20px;margin-left:20px">请选择配送方式</p>
               <p>
                 <button style="margin-top:0px;margin-left:20px;background-color:rgb(255,40,50);width:100px;height:30px;border:none">顺丰快递</button>
               </p>
               <p style="margin-top:20px;margin-left:20px">配送时间  <el-select v-model="values" placeholder="请选择" style="width:150px;height:30px">
                          <el-option
                            v-for="item in optionss"
                            :key="item.values"
                            :label="item.labels"
                            :value="item.values">
                          </el-option>
                        </el-select>
                </p>
                <p style="margin-top:20px;margin-left:20px">10月13日之前付款,预计10月14日送达</p>
             </div>
             <div class="deliver_goods_address_right">
               <p>
                   <el-alert
                    title="以下商品，预计2020年10月14日送达，运费：6.00"
                    type="info"
                    show-icon>
                  </el-alert>
               </p>
               <p style="margin-left:20px;margin-top:20px;">
                 <table style="text-align:center">
                   <tr>
                     <th style="width:100px"></th>
                     <th style="width:400px">商品名称
                     </th>
                     <th style="width:80px">单价</th>
                     <th style="width:80px">数量</th>
                     <th style="width:80px">总价</th>
                   </tr>
                   <tr>
                     <td><img style="width:70px;height:72px" :src="showImg" alt=""></td>
                     <td>{{bookName}}<br/>
                       <span class="seven"><svg t="1602576763162" class="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2542" width="18" height="18"><path d="M88.756659 845.262327c0.030206-0.6887 0.070481-1.374379 0.104715-2.062071C88.7919 843.877879 88.756659 844.566579 88.756659 845.262327z" p-id="2543" fill="#707070"></path><path d="M462.42148 777.797962c13.860582 4.042586 28.369589-3.918741 32.411168-17.78033l143.447862-483.399631c0.469202-1.456942 0.811538-2.970269 1.01996-4.526891 0.009062-0.066453 0.017117-0.1319 0.024165-0.198354 0.042289-0.336295 0.079543-0.674603 0.108742-1.014926 0.013089-0.142976 0.022151-0.285951 0.03222-0.428927 0.020137-0.269841 0.036247-0.539683 0.046316-0.811538 0.008055-0.19936 0.012082-0.397714 0.01611-0.596067 0.002014-0.14801 0.011076-0.295013 0.011076-0.443023 0-0.084577-0.006041-0.168147-0.007048-0.251718-0.002014-0.207415-0.008055-0.412817-0.015103-0.619225-0.008055-0.240642-0.017117-0.482291-0.031213-0.721926-0.010069-0.162106-0.023158-0.323205-0.036247-0.484305-0.022151-0.290986-0.04833-0.581971-0.08055-0.869936-0.009062-0.082563-0.021144-0.165127-0.031213-0.246683-1.437811-11.796497-10.728207-21.161402-22.489464-22.712989-0.040275-0.005034-0.08055-0.010069-0.120824-0.015103-0.355425-0.045309-0.711858-0.08357-1.070304-0.114783-0.135928-0.012082-0.272862-0.021144-0.407783-0.031213-0.270848-0.019131-0.54069-0.03524-0.813552-0.046316-0.209429-0.008055-0.416844-0.012082-0.625267-0.01611-0.137941-0.002014-0.273869-0.010069-0.41181-0.010069L331.902845 242.457899c-14.437519 0-26.13937 11.702858-26.13937 26.140377 0 14.436512 11.702858 26.140377 26.13937 26.140377L578.36969 294.738653 444.64115 745.388808C440.600578 759.250397 448.560898 773.759404 462.42148 777.797962z" p-id="2544" fill="#707070"></path><path d="M936.486413 371.09872C887.318903 183.133077 724.93583 37.163004 520.280298 18.449305 259.159457-5.42662 28.120892 186.897766 4.24396 448.021628c-23.879952 261.120841 168.446448 492.1584 429.569303 516.037345 204.538735 18.705644 390.578235-95.271113 473.095317-271.03449 1.884862-3.209904 3.114251-6.871893 3.475718-10.82386 1.313966-14.354956-9.255156-27.047568-23.60709-28.362541-10.680884-0.975658-20.443503 4.635633-25.278496 13.485019-0.001007 0.002014-0.006041 0.002014-0.007048 0.004027-0.007048 0.01611-0.015103 0.030206-0.021144 0.046316-0.477257 0.875978-0.902156 1.785182-1.279733 2.721572-67.366698 143.999627-213.794898 243.780514-383.272381 243.780514-233.407732 0-422.621895-189.213156-422.621895-422.620888 0-233.407732 189.214163-422.621895 422.621895-422.621895 195.841386 0 360.559392 133.212015 408.511609 313.965443l-75.605921 17.029204 103.938256 76.644005c0.425906 0.343343 0.870943 0.661514 1.322021 0.974651 5.295133 3.68414 12.045194 5.240762 18.833516 3.711325 6.791343-1.529437 12.221397-5.829781 15.426266-11.426976l0.776297-1.44788 61.044557-113.804582L936.486413 371.09872z" p-id="2545" fill="#707070"></path></svg></span> 
                      <span style=" position: relative; top: 5px;margin-left:5px">支持七天无理由退货</span>
                     </td>
                     <td>{{sale}}</td>
                     <td>{{num}}</td>
                     <td>{{num*sale}}</td>
                   </tr>
                 </table>
               </p>
               <p style="margin-top:13px">
                 <el-alert
                    title="本站郑重承诺所售商品皆为正品,假一罚十"
                    type="info"
                    close-text="知道了">
                  </el-alert> 
              </p>
             </div>
             <div class="price_num">
               <p style="padding-left:900px;margin-top:5px">商品金额：{{sale*num}} 运费：6.00</p>
               <p style="padding-left:950px;">店铺合计：<span style="color:red;font-weight:bloder;font-size:15px">{{sale*num+6}}元</span></p>
             </div>
           </div>
         </div>
         <div class="payWays" style="float:left">
           <p class="consignee">支付方式</p>
           <div class="payWays_manner">
             <el-button  style="width:200px;height:36px;margin-left:80px" :plain="true">网上支付</el-button>
              <el-button style="width:200px;height:36px;margin-left:80px" :plain="true" @click="open">货到付款</el-button>
              <!-- <el-button  style="width:200px;height:36px;margin-left:80px" :plain="true">网上支付</el-button> -->
              <el-button  style="width:200px;height:36px;margin-left:80px" :plain="true">他人代付</el-button>
           </div>
         </div>
         <div class="openInvoice" style="float:left">
           <p class="consignee">发票</p>
           <p style="margin-top:20px">
            <el-radio v-model="radio" label="1">需要开具发票</el-radio>
            <el-radio v-model="radio" label="2">不需要开具发票</el-radio>
            </p>
         </div>
         <div class="endPay" style="float:left">
           <div class="leftContents">
             <p style="padding-top:20px">
             <span style="font-weight:bolder;margin-left:20px;">寄送至：</span>中国 江苏 苏州市 吴中区 越溪街道 苏州大学文正学院
             <span style="margin-left:40px;">共1件商品</span>
             <span style="font-weight:bolder;margin-left:40px;">实付</span>
             <span style="margin-left:10px;font-size:18px;color:red;font-weight:bolder;">￥{{sale*num+6}}</span>
             <span style="margin-left:40px;">(含运费6.00元)</span>
           </p>
           <p style="padding-top:10px;margin-left:80px">
             <span>小冬瓜</span>
             <span>19826328133</span>
           </p>
           </div>
           <div class="rightContents" @click="payFor()">
             去支付
           </div>
         </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
export default {
  name: '',
  data(){
    return {
      imgPath1:require('../../assets/images/知遇.png'),
      optionss: [{
          values: '选项1',
          labels: '时间不限'
        }, {
          values: '选项2',
          labels: '只工作日送货'
        }, {
          values: '选项3',
          labels: '只双休.假期送货'
        }, 
        ],
        values: '',
        radio: '1',
        inputName: '',
        inputTel:'',
        options: regionDataPlus,
        selectedOptions: [],
        inputPlace:'',
        myAddress:[{id:0,name:"小冬瓜",tel:19826328133,address:"中国 江苏 苏州市 吴中区 越溪街道 苏州大学文正学院"}],
        status:false,
        bookId:1,
        num:0,
        bookName:'',
        showImg:'',
        sale:0
    }
  },
  methods: {
    showIt(index){
      this.$refs.dom[index].style.display = 'block'
    },
    hideIt(index){
      this.$refs.dom[index].style.display = 'none'
    },
    changeBorder(index){
      for(let i=0;i<this.myAddress.length;i++){
        this.$refs.dom1[i].style.border = '5px solid #ccc'
        this.$refs.dom2[i].style.display = 'none'
      }
      this.$refs.dom1[index].style.border = '5px solid red'
      this.$refs.dom2[index].style.display = 'block'
    },
      open() {
        this.$message('暂不支持货到付款方式');
      },
      payFor(){
        this.$axios.get('http://localhost:3000/bookshop/pay',{params:{bookName:this.bookName,sale:(this.sale*this.num)}})
        .then(res=>{
          console.log()
          location.href = res.data.data 

        })
        .catch(err=>{ 
          console.log('err',err)
        })
      },
      handleChange (value) {
        console.log(value)
      },
      selectCity(){
        // this.$router.push('/mainshow/staterange')
      },
      handleChange (value) {
        // console.log(value)
        // console.log(CodeToText[value[0]])
      },
      bindOk(){
        let that = this
        console.log('绑定成功')
        $('.btn-primary').on('click',function(){
          console.log('wo kai shi zhixing l')
          let str = ''
          let num = that.myAddress.length
          str = `${CodeToText[that.selectedOptions[0]]}-${CodeToText[that.selectedOptions[1]]}-${CodeToText[that.selectedOptions[2]]}-${that.inputPlace}`
          console.log(str)
          that.myAddress.push({id:num,name:that.inputName,tel:that.inputTel,address:str})
        })
      }
  },
  mounted(){
    this.$refs.dom2[0].style.display = 'block'
  },
  created(){
    this.bookId = this.$store.state.bookId
    this.$axios.get("http://localhost:3000/bookShop/searchBook",{params:{bId:this.bookId}})
    .then(res=>{
      let bookContent = res.data.data
      console.log(bookContent)
      this.bookName = bookContent[0].bName
      this.showImg = bookContent[0].showImg
      this.num = this.$store.state.bookCount
      this.sale = bookContent[0].sale

      this.$axios.get('http://localhost:3000/bookShop/searchAddress',{params:{uId:this.$store.state.ownUid}})
      .then(res=>{
        console.log('res',res)
        let users = res.data.data
        if(users){
          this.myAddress.push({id:this.myAddress.length,name:users[0].name,tel:users[0].tele,address:users[0].details})
        }else{
          this.$axios.get("http://localhost:3000/bookShop/searchPserson",{params:{uId:this.$store.state.ownUid}})
          .then(res=>{
            let users = res.data.data
            this.myAddress.push({id:this.myAddress.length,name:users[0].nickName,tel:users[0].tel,address:"您暂未添加地址，清您先执行添加地址的操作吧！"})
          })
          .catch(err=>{
            console.log('err',err)
          })
        }
        
      })
      .catch(err=>{
        console.log('err',err)
      })
    })
    .catch(err=>{
      console.log('err',err)
    })
  }
}
</script>

<style lang='scss' scoped>
// /deep/.el-popper[x-placement^=top] { 
//     top:310px;
// }
/deep/.el-alert{
  width:762px;
}
/deep/.el-input__icon{
  position: relative;
  left:40px;
}
/deep/ p{
  margin-bottom: 0rem;
}
.el-message-box__message p /deep/el-cascader{
  width:50px;
  height: 30px;
}
[data-v-2ba2f7d0] /deep/.el-input__inner{
  height:30px;
}
.leftContents{
  width:1000px;
  height: 80px;
  float: left;
  // background-color: red;
}
*, *::before, *::after {
    box-sizing: inherit!important;
    
}
.rightContents{
  width: 200px;
  height: 80px;
  float: left;
  text-align: center;
  line-height: 80px;
  font-size: 20px;
  background-color: red;
  font-weight: bolder;
  color: white;
}
.endPay{
  width: 1200px;
  height: 80px;
  background-color: rgb(241,245,248);
  margin-top: 40px;
  font-size: 14px;
  font-family: Microsoft JhengHei;
  position: fixed;
  bottom: 0;
}
.leftContents p{
  margin-bottom:0em
}
.openInvoice{
  width: 1200px;
  height: 60px;
  margin-top: 20px;
  margin-bottom: 120px;
}
.payWays_manner{
  width: 1200px;
  height: 50px;
  margin-top: 20px;
}
.payWays{
  width: 1200px;
  height: 100px;
  margin-top: 50px;
}
.price_num{
  font-size: 14px;
  width: 1195px;
  height: 65px;
  background-color: rgb(241,245,248);
  float: left;
  border: 1px solid #ccc;
  border-top: none;
}
.seven{
  position: relative;
  left: 0;
  top: 8px;
}
/deep/.el-input__inner{
  height:20px;
}
/deep/.el-icon-arrow-up:before{
  position: relative;
  top: -6px;
}
.deliver_goods_address_left{
  width: 400px;
  height: 200px;
  float: left;
  border: 1px solid #ccc;
  border-right: none;
  // background-color: red;
}
.deliver_goods_address_right{
  width: 794px;
  height: 200px;
  float: left;
  // background-color: black;
  border: 1px solid #ccc;
}
.deliver_goods_address{
  width: 1200px;
  height: 250px;
  font-size: 14px;
  margin-top: 20px;
}
.deliver_goods{
  width: 1200px;
  // background-color: red;
  margin-top: 30px;
}
.consignee_address_information{
  width: 200px;
  height: 30px;
  margin-top:15px;
  border-bottom: 1px solid #ccc;
  margin-left: 20px;
}
.consignee_address_details{
  width: 200px;
  margin-top:5px;
  margin-left: 20px;
  line-height: 1.5em;
}
.consignee_address_name{
  font-size: 14px;
  font-weight: bold;
  font-family: 黑体;
  // margin-left: 20px;
}
.consignee{
  margin-top: 10px;
  font-size: 18px;
  font-family: 黑体;
}
.consignee_address{
  width: 250px;
  height: 150px;
  margin-top: 10px;
  border: 5px solid #ccc;
 float: left;
}
.consignee_address+.consignee_address{
  margin-left: 40px;
}
.All{
  background-color: white;
  height: 1100px;
}
.main{
  width: 1200px;
  position: relative;
  left: 50%;
  margin-left: -600px;

}
.header{
  width: 1200px;
  position: relative;
  left: 50%;
  margin-left: -600px;
  height: 100px;
  line-height: 100px;
  border-bottom: 5px solid #ccc;
}
.header_content{
  font-size: 25px;
  position: relative;
  top: 10px;
  margin-left: 10px;
}
</style>
